<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上传文件</title>
  <style type="text/css">
    ul{
      padding: 0;
      margin: 0;
      margin-top: 100px;
      list-style: none;
    }

    .progress-bar{
      position: relative;
      width: 300px;
      height: 40px;
      border: 1px solid #666;
    }

    .progress{
      width: 0;
      height: 100%;
      background-color: green;
    }

    .error-info{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <input type="file" id="file" multiple />
  <input type="submit" id="submitBtn" value="上传" />

  <ul id="progress-wrap">
    
  </ul>

  <script type="text/javascript">
    var oSubmitBtn = document.getElementById('submitBtn'),
        oFile = document.getElementById('file'),
        oProgressWrap = document.getElementById('progress-wrap');

    oFile.onchange = function(){
      var files = oFile.files,
          fileLen = files.length;

      if(fileLen > 5){
        console.log(new Error('最多可同时上传5张图片'));
        return;
      }

      oProgressWrap.innerHTML = '';

      var filesName = '',
          //maxSize = 1048576,
          maxSize = 3221225472,
          fd = null,
          errorInfo = '';

      for(var i = 0; i < fileLen; i++){
        fileName = files[i].name.toLowerCase(),
        fileSize = files[i].size;

        // if(!/\.(gif|jpg|jpeg|png)$/.test(fileName)){
        //   errorInfo = '『' + fileName + '』文件不是图片类型';
        // }

        if(!/\.(mp4)$/.test(fileName)){
          errorInfo = '『' + fileName + '』文件不是mp4类型';
        }

        if(fileSize > maxSize){
          errorInfo = '『' + fileName + '』超过最大大小';
        }
        

        // <li class="progress-bar">
        //   <div class="progress"></div>
        // </li>
        var oProgressBar = document.createElement('li');
        oProgressBar.className = 'progress-bar';
        
        oProgressWrap.appendChild(oProgressBar);

        if(errorInfo !== ''){
          oProgressBar.innerHTML = '<span class="error-info">'+ errorInfo +'</span>';
        }else{
          oProgressBar.innerHTML = '<div class="progress"></div>';

          fd = new FormData();
          fd.append('file', files[i]);

          var o = window.XMLHttpRequest ?
                  new window.XMLHttpRequest() :
                  new ActiveXObject('Microsoft.XMLHTTP');

          if(!o){
            throw new Error('您的浏览器不支持AJAX异步发起HTTP请求');
          }

          o.open('post', 'server/upload.php');

          (function(i){
            o.upload.onprogress = function(e){
              var e = e || window.event,
                  percent = e.loaded / e.total * 100 + '%',
                  thisProgressBar = oProgressWrap.getElementsByClassName('progress-bar')[i];

              thisProgressBar.getElementsByClassName('progress')[0].style.width = percent;
            }
          })(i);

          o.send(fd);
        }

        
      }
    }
   	
  </script>

</body>
</html>






